
// 面向对象做轮播图
// 类：轮播图。

// 提高认识：类里面的属性，对于类的方法来说是不是就是全局变量呢。即：属性在任何一个方法里都可以使用

class Slider{
    constructor(oBox,obj){
        // 一、外部传入的属性
        //1)、 dom相关
        this.oBox=oBox;
        //2）、数据相关（都给默认值）
        // 属性的默认值(列出来所有的属性)：可以由外部传入
        let defaultObj = {
            // 超链数组：
            hrefs:["https://www.baidu.com","http://www.1000phone.com"],
            // 轮播图容器 宽，高
            width : this.oBox.offsetWidth,
            height : this.oBox.offsetHeight,
            // 豆豆容器
            // 的背景颜色
            douBoxColor:"orange",
            // douBoxHeight:20,
            // 豆豆
            // 宽，高，原始颜色，高亮颜色，是否是圆的等等
            douWidth : 10,
            douHeight : 10,
            douColor : "pink",
            douHighColor : "red",
            douIsCircle : true, //豆豆是不是圆的
            // 播放时长(两张图片的时间间隔，包括图片滑动的时间和停止的时间)
            timeLong : 2000,     
        }
        
        // 把属性赋给this
        for(let key in defaultObj){
            this[key] = obj[key]==undefined?defaultObj[key]:obj[key];
        }

        //二、内部属性（不需要外部传入，只是内部赋值并使用）
        //1）、DOM相关属性
        
        // 图片的容器
        this.oImgBox = this.oBox.firstElementChild;
        // 所有的图片
        this.oImgs = this.oImgBox.children;
        // 豆豆的容器
        this.oUlDou = this.oBox.children[1];
        // 豆豆
        this.oLiDous = this.oBox.children[1].children;   
        // 左箭头
        this.oSpanLeft = this.oBox.children[2];
        // 右箭头
        this.oSpanRight = this.oBox.children[3];

        // 2)、数据相关的
        this.myTimer = null;
        this.ord=0,
        this.direction=-1 //-1表示朝左（负方向）； 1 表示朝右（正方向）

        this.sliderTime = this.timeLong/3 //滑动需要的时长是总时长的三分之一。
        // 计算图片的数量
        this.imgCount = this.oImgs.length;//

        // 调用方法
        this.render();
        this.autoPlay();
        this.addEvent();

    }

    // 方法：
    // 根据传入的参数，修改HTML标签的样式
    render(){
        // 图片部分的样式处理
        {   
            //  1)、图片容器
            this.oImgBox.style.cssText = `
                    position: absolute;
                    left:0;
                    top:0;
                    width: ${this.imgCount*this.width}px;
                    height: ${this.height}px;
            `;
            // 2)、每张图片
            for(let i=0;i<this.oImgs.length;i++){
                this.oImgs[i].style.cssText = `
                    display: block;            
                    width: ${this.width}px;
                    height: ${this.height}px;
                    float: left;
                `;
            }
        }

        // 豆豆部分的样式处理
        {
            // 1）、豆豆的容器
            this.oUlDou.style.cssText = `
                    list-style: none;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: ${this.douHeight}px;
                    width: ${this.oLiDous.length*this.douWidth*2+this.douWidth}px;  
                    height:${this.douHeight*2}px;
                    background-color: ${this.douBoxColor};
                    border-radius: ${this.douHeight}px;
                    z-index: 999;
            `;

            //2）、豆豆
            for(let i=0;i<this.oLiDous.length;i++){
                this.oLiDous[i].style.cssText = `
                    float: left;
                    margin-top: ${this.douHeight/2}px;
                    width: ${this.douWidth}px;
                    height:${this.douHeight}px;
                    margin-left: ${this.douWidth}px;
                    background-color: ${i==0?this.douHighColor:this.douColor};
                    border-radius: ${this.douIsCircle?"50%":"0px"};
                `;
            }
        }   
    
        // 左右箭头
        {        
           let cssStr =  `
                position: absolute;
                top: ${(this.height-40)/2}px;
                display: block;
                width: 60px;
                height: 40px;
                font-size: 30px;
                color: red;
            `;               
            this.oSpanLeft.style.cssText = cssStr+"left: 0px;";
            this.oSpanRight.style.cssText = cssStr+"right: 0px;";
        }
    }

    // 自动播放
    autoPlay(){
        // 代码的健壮性（防止出现定时器真正工作中，你又启动了个定时器）
        if(this.myTimer!=null){
            return;
        }
        this.myTimer = setInterval(()=>{
            // 要播放下一张了
            this.goImg(this.ord+1);
        },this.timeLong);
    }

    stopPlay(){
        window.clearInterval(this.myTimer);
        this.myTimer = null;
    }

    // 功能：跳转到指定的图片上。
    // 参数：指定的图片序号
    goImg(transOrd){ // 一、数据处理
        // 1、计算数据
        let outOrd = this.ord; 
        this.ord = transOrd; 
        // 2、边界判断
        if(this.ord>this.imgCount-1){
            this.ord = 0;
        }else if(this.ord<0){
            this.ord=this.imgCount-1;
        }

        // 二、外观呈现(改变图片所在盒子的坐标)
        // 1、让图片(容器)滑动
        
        let imgWidth = this.oImgBox.offsetWidth/this.imgCount; //每张图片的宽度
        mover03(this.oImgBox, "left", this.direction*this.ord*imgWidth,this.sliderTime);
       
        // 2、让豆豆变颜色        
        this.oLiDous[outOrd].style.backgroundColor = this.douColor;
        this.oLiDous[this.ord].style.backgroundColor = this.douHighColor;

    }

    
    // 给DOM 元素绑定事件的方法
    addEvent(){     
        // 鼠标移入停止
        this.oBox.onmouseover = ()=>{
            this.stopPlay();
        }

        // 鼠标离开继续播放
        this.oBox.onmouseout = ()=>{
            this.autoPlay();
        }

        // 点击豆豆跳转到图片
        for(let i=0;i<this.oLiDous.length;i++){
            this.oLiDous[i].onclick = ()=>{
                this.goImg(i);    
            }
        }
        
        // 点击左右箭头
      
        this.oSpanLeft.onclick = ()=>{
            this.goImg(this.ord-1);
        }
        
        this.oSpanRight.onclick = ()=>{
            this.goImg(this.ord+1);
        }
        
        // 超链
        for(let i=0;i<this.oImgs.length;i++){
            this.oImgs[i].onclick = ()=>{
                // location.href = this.hrefs[i];
                window.open(this.hrefs[i]);
            }
        }

        // 窗口的焦点事件
        window.onblur = ()=>{
            this.stopPlay();
        }
        
        window.onfocus = ()=>{
            this.autoPlay();
        }
    }

}    


